<html>
<head>
	<meta charset="UTF-8">
	<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css"
	charset=UTF-8 />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/themes/icon.css" charset=UTF-8 />
<!-- 引入jquery 和  easyui.js   中文设置js-->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"
	charset=UTF-8></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"
	charset=UTF-8></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"
	charset=UTF-8></script>	
</head>

<script type="text/javascript">
$(function () {
	  $('#dg').datagrid({  
		url:'allorder_json.action',
	  });
	  
})
</script>
<body>
	<h2>Cell Editing in DataGrid</h2>
	<p>Click a cell to start editing.</p>
	<div style="margin:20px 0;"></div>
	
	<table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto"
			data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				url: 'datagrid_data1.json',
				method:'get',
				onClickCell: onClickCell
			">
		<thead>
			<tr>
				<th data-options="field:'oid',width:80">编号</th>
				<th data-options="field:'sendname',width:100,editor:'text'">寄件人</th>
				<th data-options="field:'sendtel',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">寄件人电话</th>
				<th data-options="field:'addressname',width:80,align:'right',editor:'numberbox'">收件人</th>
				<th data-options="field:'addresstel',width:250,editor:'text'">收件人电话</th>
			</tr>		
		</thead>
					
	</table>
</body>

<script type="text/javascript">

$.extend($.fn.datagrid.methods, {
	editCell: function(jq,param){
		return jq.each(function(){
			var opts = $(this).datagrid('options');
			var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
			for(var i=0; i<fields.length; i++){
				var col = $(this).datagrid('getColumnOption', fields[i]);
				col.editor1 = col.editor;
				if (fields[i] != param.field){
					col.editor = null;
				}
			}
			$(this).datagrid('beginEdit', param.index);
			for(var i=0; i<fields.length; i++){
				var col = $(this).datagrid('getColumnOption', fields[i]);
				col.editor = col.editor1;
			}
		});
	}
});

var editIndex = undefined;
function endEditing(){
	if (editIndex == undefined){return true}
	if ($('#dg').datagrid('validateRow', editIndex)){
		$('#dg').datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	} else {
		return false;
	}
}
function onClickCell(index, field){
	if (endEditing()){
		$('#dg').datagrid('selectRow', index)
				.datagrid('editCell', {index:index,field:field});
		editIndex = index;
	}
}

</script>




</html>
